.InputWrapper {
    display: flex;
    align-items: center;
    border-radius: 48px;
    padding: 8px 16px;
    border: 2px solid var(--icon-redesigned);
    width: 100%;
}

.s {
    height: 32px;
}

.m {
    height: 38px;
}

.l {
    height: 44px;
}

.addonLeft, .addonRight {
    display: flex;
}

.withAddonLeft {
    padding-left: 8px;
}

.withAddonRight {
    padding-right: 8px;
}

.focused {
    border: 2px solid var(--accent-redesigned);

    .addonLeft svg, .addonRight svg {
        color: var(--accent-redesigned);
    }
}

.input {
    border: none;
    outline: none;
    width: 100%;
    color: var(--text-redesigned);
    background: none;

    &::placeholder {
       color: var(--hint-redesigned);
    }
}


.readonly {
    opacity: 0.7;
}
